<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>社区通运营管理后台</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
$(document).ready(function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
});
window.onresize = function(){
	var height = $(window).height();
	$("#addDiv").css({"height":height});
}
</script>
</head>
<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">

  <div data-th-replace="~{layout :: header}"></div>
  <div class="layui-body" style="left: 10px;top:10px">
    <!-- 内容主体区域 -->
 
      <form class="layui-form layui-form-pane" id ="searchAdv" th:action="@{/topic_activity/list}" method="post">

         <div class="layui-form-item">
             
 			<div class="layui-inline">
                 <label class="layui-form-label">标题</label>
                 <div class="layui-input-inline">
                     <input type="text" name="name" th:attr="value=${name}"  placeholder="请输入标题" class="layui-input" maxlength="10"/>
                 </div>
             </div>

 			<div class="layui-inline">
			    <label class="layui-form-label">状态</label>
			    <div class="layui-input-block">
			      <select name="publish">
			        <option value="-1" >全部</option>
			        <option value="0" th:selected="${publish==0}">未推荐</option>
			        <option value="1" th:selected="${publish==1}">已推荐</option>
			      </select>
			    </div>
			  </div>

             <div class="layui-inline">
                 <button class="layui-btn" type="submit">搜索</button>
             </div>
         </div>
    </form>
    <button th:onclick="'javascript:add(0);'"  class="layui-btn" type="submit"> + 添加话题活动</button>
    <table class="layui-table" >

	  <colgroup>
	    <col width="150">
	    <col width="200">
	    <col>
	  </colgroup>
	  <thead>
	    <tr>
    	  <th><b>顺序号</b></th>
	      <th><b>标题<b/></th>
	      <th><b>标签<b/></th>
	      <th><b>图片</b></th>
	      <th><b>跳转地址</b></th>
	      <th><b>跳转类型</b></th>
	      <th><b>图片位置</b></th>
	      <th><b>状态</b></th>
	      <th><b>操作人</b></th>
	      <th><b>操作时间</b></th>
	      <th><b>操作</b></th>
	    </tr> 
	  </thead>
	  <tbody>
	    <tr data-th-each="advertisement, iterStat : ${advertisementList}" >
   		  <td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}">顺序号</td>
	      <td data-th-text="${advertisement.title}"></td>
	      <td data-th-text="${advertisement.tag}">标签</td> 
		  <td>
 		  	<img th:src="${advertisement.image}"  style="width:55px;height:55px;">
 		  </td> 
  		  <td data-th-text="${advertisement.url}"></td>
		  <td>
		  	<a th:if="${advertisement.type == 0}">超链接</a>
	      	<a th:if="${advertisement.type == 1}">H5</a>
	      	<a th:if="${advertisement.type == 2}">帖子</a>
	      	<a th:if="${advertisement.type == 3}">门禁</a>
	      	<a th:if="${advertisement.type == 4}">小组</a>
	      	<a th:if="${advertisement.type == 5}">群聊</a>
		  </td>
	      <td>
      		<a th:if="${advertisement.position == 0}">位置一</a>
	      	<a th:if="${advertisement.position == 1}">位置二</a>
	      	<a th:if="${advertisement.position == 2}">位置三</a>
	      </td>
   		  <td data-th-text="${advertisement.publish} == 1 ? '已推荐':'未推荐'"></td>
	      <td data-th-text="${advertisement.operator}">操作人</td>  
	      <td data-th-text="${advertisement.operateTime}" class="date">操作时间</td>
	      <td>
				<a th:onclick="'javascript:edit(' + ${advertisement.id} + ');'"   class="layui-btn  layui-btn-xs layui-btn-normal">编辑</a>
				<a th:onclick="'javascript:recommend(' + ${advertisement.id} + ',' + ${advertisement.publish} + ');'"  th:if="${advertisement.publish == 1}" class="layui-btn  layui-btn-xs layui-btn">取消推荐</a>
      			<a th:onclick="'javascript:recommend(' + ${advertisement.id} + ',' + ${advertisement.publish} + ');'"  th:if="${advertisement.publish == 0}" class="layui-btn  layui-btn-xs layui-btn">推荐</a>
				<a th:onclick="'javascript:delActivity(' + ${advertisement.id} + ');'"  class="layui-btn  layui-btn-xs  layui-btn-danger">删除</a>
		  </td>
	    </tr >

	  </tbody>
	</table>
	
	<div id="pageContent"></div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->

  </div>
</div>
<div id="addDiv" style="display: none;" align="center">
		<form id="addForm" class="layui-form layui-form-pane" lay-filter="addForm">
			<div class="layui-form-item " style="width: 575px;">
				<div class="layui-input-block">
					<div id="position0" class="layui-input-inline" style="border:1px solid gray;width:220px;height:132px;background-color:#B3D9D9"></div>
					<div class="layui-input-inline" style="width: 120px;">
						<div id="position1" style="border:1px solid gray;width:120px;height:63px;" ></div>
						<div id="position2" style="border:1px solid gray;width:120px;height:63px;"></div>
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block"> 
				  <label class="layui-form-label">位置</label>
				  <div class="layui-input-inline" style="width: 320px;">
				      <input type="radio" name="position" lay-filter="position" value="0" title="位置一" checked>
				      <input type="radio" name="position" lay-filter="position" value="1" title="位置二" >
				      <input type="radio" name="position" lay-filter="position" value="2" title="位置三" >
			      </div>
		      </div>
		  </div>
			
			<div class="layui-form-item" id="nameDiv">
				<div class="layui-input-block">
					<label class="layui-form-label"><span style="color: red;">*</span>标题</label>
					<div class="layui-input-inline">
						<input id="name" name="name" placeholder="请填写标题" lay-verify="required"  class="layui-input" maxlength="30">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<label class="layui-form-label"><span style="color: red;">*</span>标签</label>
					<div class="layui-input-inline">
						<input id="tag" name="tag" placeholder="请填写标签" lay-verify="required"  class="layui-input" value=""
							maxlength="30">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<label class="layui-form-label"><span style="color: red;">*</span>图片</label>
					<div class="layui-input-inline" style="width: 260px;">
						<img  id="image"  style="width: 260px;" >
						<input style="display:none" name="image" id="imageUrl">
						<input onchange="onFileChange(event, 'image')" type="file" name="file" id="file" >
						<span id="suggest"> (建议尺寸440*264，大小不超过100KB)</span>
					</div> 
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
	                    <label class="layui-form-label"><span style="color: red;">*</span>跳转类型</label>
	                    <div class="layui-input-inline jumptypeparent" style="width: 150px;">
	                        <select id="jumptype" name="jumptype" lay-filter="jumptype">
	                            <option value="-1">请选择跳转类型</option>
	                                <option value="0">超链接</option>
	                                <option value="1">H5应用</option>
	                                <option value="2">帖子</option>
	                                <option value="3">门禁</option>
	                                <option value="4">小组</option>
	                                <option value="5">群聊</option>
	                        </select>
	                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="feedId">
                <div class="layui-input-block">
                    <label class="layui-form-label">
                        <span style="color: red;">*</span> 小组feedId</label>
                    <div class="layui-input-inline">
                        <input type="text" id="feed_id" name="feedId"  autocomplete="off"
                               value="" placeholder="请输入小组feedId" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="app_id">
                <div class="layui-input-block">
                    <label class="layui-form-label"><span style="color: red;">*</span> APPID</label>
                    <div class="layui-input-inline">
                        <input type="number" id="appId"  name="appId"  autocomplete="off"
                               value="" placeholder="请输入APPID" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="url">
                <div class="layui-input-block">
                    <label class="layui-form-label"><span style="color: red;">*</span> 跳转地址</label>
                    <div class="layui-input-inline">
                        <input type="text"  id="jumpUrl"  name="url"  autocomplete="off"
                               value="" placeholder="请输入跳转地址" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item" id="card_id">
                <div class="layui-input-block">
                    <label class="layui-form-label"><span style="color: red;">*</span> 帖子ID</label>
                    <div class="layui-input-inline">
                        <input type="text"  id="cardId" name="cardId"  autocomplete="off"
                               value="" placeholder="请输入帖子ID" class="layui-input">
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item" id="groupChatId">
                <div class="layui-input-block">
                    <label class="layui-form-label"><span style="color: red;">*</span> 群聊ID</label>
                    <div class="layui-input-inline">
                        <input type="text"  id="groupchat_id"  name="groupChatId"  autocomplete="off"
                               value="" placeholder="请输入群聊ID" class="layui-input">
                    </div>
                </div>
            </div>
            
		   <div class="layui-form-item"> 
			      <input type="radio" name="recommend" value="1" title="推荐">
			      <input type="radio" name="recommend" value="0" title="取消推荐" checked>
		  </div>
		  
		  <input type="hidden"   id="id" >
		</form>
</div>

<!-- <script src="/layui/jquery.min.js"></script>
<script src="/layui/layui.js"></script> -->
<script th:inline="javascript">
//JavaScript代码区域
var contextRoot = /*[[@{/}]]*/ '';
var errMsg = "还有信息未填写，请完善信息";
layui.use(['laypage','layer','form'], function(){
	  var laypage = layui.laypage;
	  var layer = layui.layer;
	  var form = layui.form;
	  //执行一个laypage实例
	  laypage.render({
		  elem: 'pageContent'
		  ,count:[[${count}]] //数据总数，从服务端得到
		  ,curr: [[${pageIndex}]]
  		  ,limit: [[${pageSize}]]
		  ,layout:['count','prev', 'page', 'next','skip']
		  ,jump: function(obj, first){
			  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
			    console.log(obj.limit); //得到每页显示的条数
		    //首次不执行
		   if(!first){
		      var l =  contextRoot + "/topic_activity/list?pageIndex=";
		      window.location.href = l + obj.curr + "&pageSize=" + obj.limit +  "&" + $("#searchFrom").serialize();
		    } 
		  }
		}); 
	 form.on("select(jumptype)", function (data) {
		    var value = data.value;
		    showTab(value);
		});
	 
		form.on("radio(position)", function(data) {
		 
			var value = data.value;
			 console.log(data);
			 var color = "#B3D9D9"
			 if (value==0) {
				 $("#position0").css("background-color",color);
				 $("#position1").css("background-color","");
				 $("#position2").css("background-color","");
				 $("#suggest").html(" (建议尺寸440*264，大小不超过100KB)");
			 } else if (value==1){
				 $("#position0").css("background-color","");
				 $("#position1").css("background-color",color);
				 $("#position2").css("background-color","");
				 $("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
			 } else {
				 $("#position0").css("background-color","");
				 $("#position1").css("background-color","");
				 $("#position2").css("background-color",color);
				 $("#suggest").html(" (建议尺寸240*126，大小不超过100KB)");
			 }
			 
		});
		
	});
 
/* 删除 */
function delActivity (id){
	
    layer.confirm('确认删除吗?', function(index){
 
        $.ajax({
            type: "POST",
            data: {id: id},
            url: contextRoot + "/topic_activity/delete",
            dataType: "json",
            success: function (msg) {
            	console.log(msg);
                if (msg.meta.code == 0) {
                    var l = contextRoot + "/topic_activity/list?name=";
                	window.location.href = l + $("#searchAdv input[name='name']").val() + "&publish=" + $("#searchAdv select[name='publish']").val();
					layer.msg(msg.meta.message);

                } else {
                    layer.msg(msg.meta.message);
                }
            }
        });
        layer.close(index);
    })
}

function recommend(id, status) {
	var str = '推荐';
	if (status == 1)　 str='取消推荐';
    layer.confirm('确认进行'+ str +'操作吗?', function(index){
        $.ajax({
            type: "POST",
            data: {id: id,status: status},
            url: contextRoot + "/topic_activity/recommend",
            dataType: "json",
            success: function (msg) {
            	console.log(msg);
                if (msg.meta.code == 0) {
      		      	window.location.href = contextRoot + '/topic_activity/list?pageIndex=' + [[${pageIndex}]] + "&pageSize=" + [[${pageSize}]] + "&name=" + $("#searchAdv input[name='name']").val() + "&publish=" + $("#searchAdv select[name='publish']").val();

                } else {
                	alert(msg.meta.message)
                }
            }
        });
        layer.close(index);
    })
}

/* 添加 */
function add(id) {
	var str ="新增"; 
	if(id > 0) {
		str = "编辑";
	} else {
		$('#id').val('');
		$('#name').val('');
		$('#tag').val('');
		$('#imageUrl').val('');
		$('#cardGroupId').val('');
		$('#groupId').val('');
		$('#appId').val('');
		$('#position').val(0);
		$('#publish').val(0);
		$('#jumpType').val(-1);
		$('#url').val('');
	}
	
	
	layer.open({
		type: 1,
		title: str+"话题活动",
		area: ['40%','80%'],
		content: $('#addDiv'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index) {
			var image = $("#imageUrl").val();
			 if (!image) {
				 alert(errMsg);
				 return false;
			 }
			var jumptype = $("#jumptype option:selected").val();
			console.log(jumptype);
		    if (jumptype == -1) {
		        alert(errMsg);
		        return false;
		    }
		    if (jumptype == 0) {
		    	var url = $('#jumpUrl').val();
		    	if(!url) {
		    		alert(errMsg);
			    	return false;
		    	}
		    }
		    if (jumptype == 1) {
		    	var appId = $('#appId').val();
		    	console.log(appId);
		    	if(isNaN(appId)) {
		    		alert(errMsg);
			    	return false;
		    	}
		    }
		    if (jumptype == 2) {
		    	var feedId = $('#feed_id').val();
		    	var cardId = $('#cardId').val();
		    	console.log("feedId"+feedId);
		    	console.log("cardId"+cardId);
		    	if(!feedId ||!cardId) {
		    		alert(errMsg);
			    	return false;
		    	}
		    }
		    if (jumptype == 4) {
		    	var feedId = $('#feed_id').val(); 
		    	console.log("feedId"+feedId); 
		    	if(!feedId) {
		    		alert(errMsg);
			    	return false;
		    	}
		    }
		    if (jumptype == 5) {
		    	var groupchat_id = $('#groupchat_id').val(); 
		    	console.log("groupchat_id"+groupchat_id); 
		    	if(!groupchat_id) {
		    		alert(errMsg);
			    	return false;
		    	}
		    }
		    
		    var img1 = $('#imageUrl').val(); 
		    var radioValue = $('#addDiv input[name="position"]:checked').val();
		    if (radioValue == 0) {
		    	if (!checkPicurl(img1, 440, 264)) {
		    		layer.msg("图片比例只能为440*264哦！");
		        	return false;
		    	}
		    } else {
		    	if (!checkPicurl(img1, 240, 126)) {
		    		layer.msg("图片比例只能为240*126哦！");
		        	return false;
		    	}
		    }
			
			var obj = $("#addForm").serialize();
			obj += '&id='+id;
			console.log(obj);
			$.ajax({
				type : "POST",
				data : obj,
				url : contextRoot + "/topic_activity/save_activity",
				dataType : "json",
				success : function(msg) {
					console.log(msg); 
					if (msg.meta.code == 0) {
						alert("保存成功!");
						layer.close(index);
						window.location.reload();
					} else {
						layer.msg(msg.meta.message);
					}
				}
			});
		},
		cancel:function(){
			console.log('no add ');
		}
	});
}


function edit(id){
	layer.open({
		type: 2,
		title: "编辑话题活动",
		area: ['40%','80%'],
		content: contextRoot + "/topic_activity/info_view?id=" + id, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			save(index,id);
		},
		cancel:function(){}
	});
}

function save(index,id){
	layer.confirm('确定要提交吗?',function(index) {
		var jumptype = $("iframe").contents().find('#jumptype').val();
		console.log(jumptype);

		var image = $("iframe").contents().find('#imageUrl').val();
		 if (!image) {
			 alert(errMsg);
			 return false;
		 } 
		 
	    if (jumptype == -1) {
	        alert(errMsg);
	        return false;
	    }
	    if (jumptype == 0) {
	    	var url = $("iframe").contents().find('#jumpUrl').val();
	    	if(!url) {
	    		alert(errMsg);
		    	return false;
	    	}
	    }
	    if (jumptype == 1) {
	    	var appId = $("iframe").contents().find('#appId').val();
	    	var url = $("iframe").contents().find('#jumpUrl').val();
	    	console.log("appId"+appId);
	    	console.log("url"+url);
	    	if(isNaN(appId) || !appId || !url) {
	    		alert(errMsg);
		    	return false;
	    	}
	    }
	    if (jumptype == 2) {
	    	var feedId = $("iframe").contents().find('#feed_id').val();
	    	var cardId = $("iframe").contents().find('#cardId').val(); 
	    	console.log("feedId"+feedId);
	    	console.log("cardId"+cardId);
	    	if(!feedId ||!cardId) {
	    		alert(errMsg);
		    	return false;
	    	}
	    }
	    if (jumptype == 4) {
	    	var feedId = $("iframe").contents().find('#feed_id').val(); 
	    	console.log("feedId"+feedId); 
	    	if(!feedId) {
	    		alert(errMsg);
		    	return false;
	    	}
	    }
	    if (jumptype == 5) {
	    	var groupchat_id = $("iframe").contents().find('#groupchat_id').val(); 
	    	console.log("groupchat_id"+groupchat_id); 
	    	if(!groupchat_id) {
	    		alert(errMsg);
		    	return false;
	    	}
	    }
	    var img1 = $("iframe").contents().find('#imageUrl').val(); 
	    var radioValue = $("iframe").contents().find('#addDiv input[name="position"]:checked').val();
		
	    if (radioValue == 0) {
	    	if (!checkPicurl(img1, 440, 264)) {
	    		layer.msg("图片比例只能为440*264哦！");
	        	return false;
	    	}
	    } else {
	    	if (!checkPicurl(img1, 240, 126)) {
	    		layer.msg("图片比例只能为240*126哦！");
	        	return false;
	    	}
	    }
	    
	    
		
		var obj = $("iframe").contents().find("#addForm").serialize();
		obj += '&id='+id;
		console.log(obj);
		$.ajax({
			type : "POST",
			data : obj,
			url : contextRoot + "/topic_activity/save_activity",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("编辑成功!");
					layer.close(index);
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}


function checkPicurl(url, shouldWidth, shouldHeight){

    var img = new Image();
    img.src = url;
    if(img.complete){
        console.log(img);
        if(shouldWidth != img.width || shouldHeight != img.height){
            return false;
        }else{
            return true;
        }
    }
}



var jumptype = $('#jumptype').val();
showTab(jumptype);
function showTab(value){
    if (value == '' || value =='-1') {
        $("#feedId").hide();
        $("#app_id").hide();
        $("#url").hide();
        $("#card_id").hide();
        $("#groupChatId").hide();
    }
    if (value == 5) {
        $("#groupChatId").show();
        $("#feedId").hide();
        $("#app_id").hide();
        $("#url").hide();
        $("#card_id").hide();
    }
    if (value == 4) {
        $("#feedId").show();
        $("#app_id").hide();
        $("#url").hide();
        $("#card_id").hide();
        $("#groupChatId").hide();
    }
    if (value == 1) {
        $("#feedId").hide();
        $("#app_id").show();
        $("#url").show();
        $("#card_id").hide();
        $("#groupChatId").hide();
    }
    if (value == 2) {
        $("#feedId").show();
        $("#app_id").hide();
        $("#url").hide();
        $("#card_id").show();
        $("#groupChatId").hide();
    }
    if (value == 3) {
        $("#feedId").hide();
        $("#app_id").hide();
        $("#url").hide();
        $("#card_id").hide();
        $("#groupChatId").hide();
    }
    if (value == 0) {
        $("#feedId").hide();
        $("#app_id").hide();
        $("#url").show();
        $("#card_id").hide();
        $("#groupChatId").hide();
    }
}

function onFileChange (e, val) {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
        return;
    }
	if (files[0]['size']>100000) {
		alert("图片过大！");
		return false;
	}
   //teImage(files, val);
	imageSize(files, val)
}

function imageSize(files, val){
	var radioValue = $('#addDiv input[name="position"]:checked').val();
	
	var mypic = document.getElementById("file").files[0];
	var windowUrl = window.URL.createObjectURL(mypic);
	// 创建对象
	var img = new Image()
	// 改变图片的src
	img.src = windowUrl
	img.onload = function(){
        if (radioValue == 0  && (img.width != 440 || img.height != 264)) {
        	layer.msg("图片比例只能为440*264哦！");
        } else if (radioValue != 0 && (img.width != 240 || img.height != 126)) {
        	layer.msg("图片比例只能为240*126哦！");
        }else{
        	createImage(files, val);
        }
        
    } 
}


function createImage (file, val) {
    var self = this;
 
    $.get('http://qiniu.systoon.com/getToken.php', function(e) {
        var formData = new FormData();
        formData.append('token', e);
        formData.append('file', file[0]);
        $.ajax({
            url: 'http://upload.qiniu.com',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(e) {
                var url = 'http://apr.qiniu.toon.mobi/' + e.key;
                console.warn(url);
               
                if (val === 'image') {
                	$("#image").attr('src',url);
                	$("#imageUrl").val(url);
                }else if(val == 'bannerUrl'){
                	$("#bannerUrl").attr('src',url);
                }
                
                self.logo = url;
            },
            error: function(e) {
                alert('upload error' + e);
            }
        });
    }); 
}


</script>


</body>
</html>